<template>
  <div>
    <van-list finished="true" finished-text="没有更多了">
      <!-- @load="onLoad" -->
      <van-cell v-for="item in list" :key="item.id" class="article-item">
        <template #title>
          <div class="head">
            <!-- <img :src="item.avatar" alt="" /> -->
            <img src="../assets/img/zhelilogo.png" alt="" />
            <div class="con">
              <p class="title van-ellipsis">{{ item.stem }}</p>
              <p class="other">{{ item.creator }} | {{ item.createdAt }}</p>
            </div>
          </div>
        </template>
        <template #label>
          <div class="body van-multi-ellipsis--l2" @click="handleClick(item)">
            {{ clearHtmlTag(item.content) }}
          </div>
          <div class="foot">
            点赞 {{ item.likeCount }} | 收藏 {{ item.views }}
          </div>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
/* eslint-disable */
import {
  xinwenxinxi_add,
  xinwenxinxi_update,
  xinwenxinxi_delete,
  xinwenxinxi_page,
} from "@/api";
import { getLocal } from "@/utils";
export default {
  name: "ArticleItem",
  data() {
    return {
      current: 1,
      sorter: "weight_desc",
      list: [
        // {
        //   id: 1,
        //   avatar: "../assets/img/zhelilogo.png",
        //   stem: "公告1",
        //   creator: "浙江理工大学",
        //   createdAt: "2024-03-06 12:34:56",
        //   content:
        //     "<p>新闻内容1新闻内容1新闻内容1新闻内容1新闻内容1新闻内容1新闻内容1新闻内容1新闻内容1新闻内容1新闻内容1</p>",
        //   likeCount: 10,
        //   views: 100,
        // },
      ],
      showList: [],
      page: 1,
    };
  },
  methods: {
    clearHtmlTag(str) {
      return str.replace(/<[^>]+>/g, "");
    },
    buildURLWithParams(url, obj) {
      const params = new URLSearchParams(obj);
      const queryParams = params.toString();
      return `${url}?${queryParams}`;
    },
    handleClick(item) {
      console.log("item", item);
      const fullURL = this.buildURLWithParams("/detail", item);
      console.log("fullURL", fullURL);
      this.$router.push(fullURL);
    },
    // async onLoad() {
    //   if (this.select === "article") {
    //     console.log("正在加载新的数据");
    //     const res = await getArticle({
    //       current: this.current,
    //       sorter: this.sorter,
    //     });
    //     console.log(res.data);
    //     // console.log(res.data.rows)
    //     this.list = this.list.concat(res.data.rows);
    //     console.log(this.list);
    //     this.current++;
    //     this.loading = false;

    //     if (this.current > res.data.pageTotal) {
    //       this.finished = true;
    //     }
    //   } else if (this.select === "like") {
    //     // 异步更新数据
    //     // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //     const { data } = await getArticlesLike({ page: this.page });
    //     this.list.push(...data.rows);
    //     this.loading = false;
    //     if (this.page === data.pageTotal || !data.rows.length) {
    //       this.finished = true;
    //     } else {
    //       this.page++;
    //     }
    //   } else if (this.select === "collect") {
    //     // 异步更新数据
    //     const { data } = await getArticlesCollect({ page: this.page });
    //     this.list.push(...data.rows);
    //     this.loading = false;
    //     if (this.page === data.pageTotal || !data.rows.length) {
    //       this.finished = true;
    //     } else {
    //       this.page++;
    //     }
    //   }
    // },
    getDetail() {
      this.visitorData = getLocal("visitorData");
    },
    async xinwenxinxiPage(payload = {}) {
      payload.limit = 9999;
      const res = await xinwenxinxi_page(payload);
      this.list = res.data.list.reverse();
      this.showList = this.list;
    },
  },
  created() {
    this.getDetail();
    this.xinwenxinxiPage();
  },
  watch: {
    $route(to, from) {
      if (to.path === "/infomation") {
        this.getDetail();
        this.xinwenxinxiPage();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.article-item {
  margin-top: 1vh;
  border-radius: 8px;
  .head {
    display: flex;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
    .con {
      flex: 1;
      overflow: hidden;
      padding-left: 10px;
      p {
        margin: 0;
        line-height: 1.5;
        &.title {
          width: 280px;
        }
        &.other {
          font-size: 10px;
          color: #999;
        }
      }
    }
  }
  .body {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-top: 10px;
  }
  .foot {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
  }
}
</style>
